<template>
  <el-dialog v-dialogDrag title="新增" :visible="isShowAddDialog" width="40%" @close="dialogClose"
    :close-on-click-modal="false">
    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="菜单级别：" prop="cddj">
        <el-radio-group v-model="cddj" @change="menuFather">
          <el-radio label="1">一级菜单</el-radio>
          <el-radio label="2">二级菜单</el-radio>
          <el-radio label="3">三级菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="cddj != '1'" label="父级菜单：" prop="parentId">
        <el-cascader v-model="ruleForm.parentId" :options="options" clearable :props="{ expandTrigger: 'hover' }"
          style="width:100%">
        </el-cascader>
      </el-form-item>
      <el-form-item label="路由地址：" prop="path">
        <el-input v-model="ruleForm.path" placeholder="/index"></el-input>
      </el-form-item>
      <el-form-item label="路由名称：" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="nameZh">
        <el-input v-model="ruleForm.nameZh"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="iconCls">
        <el-input v-model="ruleForm.iconCls"></el-input>
      </el-form-item>
      <el-form-item label="组件路径：" prop="component">
        <el-input v-model="ruleForm.component" placeholder="解析路由对应的组件"></el-input>
      </el-form-item>
      <el-form-item label="优先级：" prop="priority">
        <el-input type="number" v-model="ruleForm.priority" placeholder=">=0 数字越小越靠前"></el-input>
      </el-form-item>
      <el-form-item label="type：" prop="type">
        <el-input v-model="ruleForm.type"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" class="pull-right margin-l-25">确定
        </el-button>
        <el-button @click="dialogClose" class="pull-right">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getAll, addMenu } from "@/api/systemManage/menuManage";
export default {
  name: 'menuManageAdd',
  props: {
    isShowAddDialog: {
      type: Boolean
    }
  },
  data () {
    return {
      cddj: '',
      ruleForm: {
        parentId: '',
        path: '',
        name: '',
        nameZh: '',
        iconCls: '',
        component: '',
        remark: '',
        priority: ''
      },
      rules: {
        parentId: [{ required: true, message: "请选择父级菜单", trigger: "change" }],
        // path: [{ required: true, message: "请上传路由路径", trigger: "change" }],
        // nameZh: [{ required: true, message: "请上传菜单名称", trigger: "change" }],
        // iconCls: [{ required: true, message: "请上传图标", trigger: "change" }],
        // component: [{ required: true, message: "请上传组件", trigger: "change" }],
      },
      options: []
    }
  },
  methods: {
    dialogClose () {
      this.$emit("dialogClose");
    },
    menuFather () {
      getAll().then((res) => {
        if (this.cddj == '2') {
          this.options = []
          for (let i = 0; i < res.data.length; i++) {
            this.options.push({
              label: res.data[i].nameZh,
              value: res.data[i].id
            })
          }
        } else if (this.cddj == '3') {
          this.options = []
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].children.length > 0) {
              this.options.push({
                label: res.data[i].nameZh,
                value: res.data[i].id,
                children: []
              })
              for (let j = 0; j < res.data[i].children.length; j++)
                this.options[this.options.length - 1].children.push({
                  label: res.data[i].children[j].nameZh,
                  value: res.data[i].children[j].id
                })
            }

          }
        }
      })
    },
    submitForm () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.cddj == '1') {
            this.ruleForm.parentId = 0
          } else if (this.cddj == '2') {
            this.ruleForm.parentId = this.ruleForm.parentId[0]
          } else if (this.cddj == '3') {
            this.ruleForm.parentId = this.ruleForm.parentId[1]
          }
          addMenu(this.ruleForm).then((res) => {
            if (res) {
              this.$router.go(0)
            }
          })
        } else {
          return
        }
      })
    },
  },
};
</script>

<style lang="less">
.el-scrollbar__wrap {
  overflow: hidden !important;
  overflow-y: auto !important;
}

.ql-toolbar.ql-snow+.ql-container.ql-snow {
  height: 200px;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.el-input__inner {
  line-height: 1px !important;
}
</style>
